import {
    createApp
} from "vue";
import "./styles.css";
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from "./App.vue";
import router from './router/index.js';
import Hljs from "highlight.js";
import JsonViewer from "vue3-json-viewer";
import "vue3-json-viewer/dist/index.css"; // 引入样式
const app = createApp(App);
app.use(JsonViewer)
app.use(ElementPlus);
for (let i in ElementPlusIconsVue) {
    app.component(i, ElementPlusIconsVue[i])
}
app.use(router).mount("#app")

// 自定义指令
app.directive('highlight', function (el) {
    const blocks = el.querySelectorAll('pre code');

    blocks.forEach((block) => {
        // 1.创建ul节点
        let ul = document.createElement("ul");
        // 2.根据换行符获取行数，根据获取的行数生成行号
        let rowCount = block.outerHTML.split('\n').length;
        //let h = "";
        let li = document.createElement("li")
        let text = document.createTextNode("")
        //为li追加文本节点，将li加入ul
        li.appendChild(text)
        ul.appendChild(li)
        for (let i = 1; i <= rowCount; i++) {
            //创建li节点，创建文本节点
            let li = document.createElement("li")
            let text = document.createTextNode(i)
            //为li追加文本节点，将li加入ul
            li.appendChild(text)
            ul.appendChild(li)
            //h += "<span>" + i + "</span>" + block.outerHTML.split('\n')[i] + "\n";
        }
        // 3.给行号添加类名
        ul.className = 'pre-numbering'
        // 4.将ul节点加到 代码块
        block.parentNode.appendChild(ul)

        Hljs.highlightBlock(block);
        block.innerHTML = `<ol><li>${block.innerHTML.replace(
            /\n/g,
            `</li><li class="line">`
          )}</li></ol>`;

    });
});